<template>
    <div>
        <div class="header">
            <h2>本月目标完成进度:</h2>
            <el-steps :active="4" align-center>
                <el-step title="0%" description="起点" />
                <el-step title="25%" description="用户入会率>50%" />
                <el-step title="50%" description="用户入会率>75% || 高级会员数>100" />
                <el-step title="75%" description="用户入会率100%" />
                <el-step title="100%" description="高级会员数300" />
            </el-steps>
        </div>
        <h2>会员等级详情:</h2>
        <div class="demo-progress">
            <el-progress type="circle" :percentage="7"  />
            <el-progress type="circle" :percentage="25" />
            <el-progress type="circle" :percentage="83"/>
            <el-progress type="circle" :percentage="35" />
            <el-progress type="circle" :percentage="59" />
        </div>
        <div class="titles">
            <h3>未入会人数</h3>
            <h3>一级会员</h3>
            <h3>二级会员</h3>
            <h3>三级会员</h3>
            <h3>四级会员</h3>
        </div>
    </div>
</template>
<script lang="ts" setup>

</script>

<style scoped>
.demo-progress{
    margin-top: 30px;
    margin-left: 15%;
    margin-right: 10%;
}
.demo-progress .el-progress--line {

    width: 350px;
  }
  .demo-progress .el-progress--circle {
    margin-right: 30px;
  }
  .header{
    margin-top: 45px;
    margin-bottom: 35px;
  }
  h2{
    margin-left: 45px;
    color: rgb(81, 80, 80);
  }
  .titles{
    padding: 50px;
    padding-left: 70px;
  }
  h3{
    display: inline-block;
    margin-left: 90px;
  }
</style>